<template>
  <div class="recording">
    <div class="timer" v-if="timerVisible">{{ formattedTime }}</div>
    <video
      v-if="video"
      ref="screenVideo"
      autoplay
      width="100%"
      height="100%"
    ></video>
    <div class="button">
      <!-- <el-button type="primary" @click="start">开始</el-button>
      <el-button type="primary" @click="stop">结束</el-button> -->
    </div>
  </div>
</template>

<script>
import { gameEnd } from "@/api/flyGame";
import { addFlyTask } from "@/api/flyGame";
import axios from "axios";
import pubsub from "pubsub-js";

export default {
  name: "Recording",
  data() {
    return {
      stream: null,
      video: false,
      timer: null,
      timeRemaining: 60, // 3 minutes in seconds
      timerVisible: false,
    };
  },
  computed: {
    formattedTime() {
      const minutes = String(Math.floor(this.timeRemaining / 60)).padStart(
        2,
        "0"
      );
      const seconds = String(this.timeRemaining % 60).padStart(2, "0");
      return `${minutes}:${seconds}`;
    },
  },
  methods: {
    // 打开exe
    async openExe() {
      const exePath = localStorage.getItem("gameFilePath");
      if (exePath) {
        try {
          const response = await axios.post("http://localhost:3000/wake-app", {
            exePath,
          });
          console.log(response.data);
        } catch (error) {
          console.error("请求失败:", error);
        }
      } else {
        this.$modal.msgError("未配置游戏路径！");
      }
    },
    // 开始屏幕分享
    async start() {
      this.video = true;
      this.timerVisible = true;
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
        });
        this.stream = stream;
        this.$refs.screenVideo.srcObject = stream;

        this.timeRemaining = 60; // 重置时间为3分钟
        this.timer = setInterval(() => {
          if (this.timeRemaining > 0) {
            this.timeRemaining--;
          } else {
            this.stop();
            this.$router.push("/test/report");
          }
        }, 1000);
      } catch (error) {
        console.error("Error starting screen sharing:", error);
      }
    },
    // 停止屏幕分享
    stop() {
      if (this.stream) {
        this.stream.getTracks().forEach((track) => track.stop());
      }

      if (this.timer) {
        clearInterval(this.timer);
      }

      this.video = false;
      this.timerVisible = false;
      this.stream = null;

      gameEnd();
    },
  },
  created() {
    this.openExe();
    pubsub.subscribe("action3", () => {
      addFlyTask({
        userId: localStorage.getItem("testUserId"),
        parentId: localStorage.getItem("testTaskId"),
        taskId: localStorage.getItem("game"),
      }).then((res) => {
        localStorage.setItem("gameTaskId", res.data);
      });
      this.start();
    });
  },
  beforeDestroy() {
    this.stop();
  },
};
</script>

<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap");

.recording {
  height: 100%;
  background-color: #060d0f;
  position: relative;
}

.timer {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  color: rgba($color: skyblue, $alpha: 0.7);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 120px;
  text-align: center;
  font-family: "Orbitron", sans-serif;
}
.button {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
